<template>
  <div class>
    <!-- 步骤条 -->
    <el-steps :active="2" finish-status="success" simple>
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
      <el-step title="步骤 4"></el-step>
    </el-steps>

    <!-- ---------------------------------------------表单 -->
    <el-card>
      <el-form
      size="mini"
        :model="ruleForm"
        :rules="rules"
        :inline="true"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <my-form-item label="活动名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </my-form-item>
        <my-form-item label="活动区域" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </my-form-item>

        <my-form-item label="活动时间" required>
          <el-col :span="11">
            <my-form-item prop="date1">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.date1"
                style="width: 100%;"
              ></el-date-picker>
            </my-form-item>
          </el-col>
          <el-col class="line" :span="2" style="text-align:center;">
            <span style="margin-right:10px;">-</span>
          </el-col>
          <el-col :span="11">
            <my-form-item prop="date2">
              <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
            </my-form-item>
          </el-col>
        </my-form-item>
        <my-form-item label="即时配送" prop="delivery">
          <el-switch v-model="ruleForm.delivery"></el-switch>
        </my-form-item>
        <my-form-item label="活动性质" prop="type">
          <el-checkbox-group v-model="ruleForm.type">
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
          </el-checkbox-group>
        </my-form-item>
        <my-form-item label="特殊资源" prop="resource">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </my-form-item>
        <br />
        <my-form-item label="活动形式" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </my-form-item>
        <my-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </my-form-item>
      </el-form>
    </el-card>
    <!-- --------------------------------------------btns -->
    <el-card>
      <div class="clearfix">
        <div class="fr">
          <el-button type="primary" @click="add">新增</el-button>
        </div>
      </div>
    </el-card>
    <!-- --------------------------------------------表格 -->
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="province" label="省份" width="120"></el-table-column>
      <el-table-column prop="city" label="市区" width="120"></el-table-column>
      <el-table-column prop="address" label="地址" width></el-table-column>
      <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
</el-table-column>
</el-table>
<!------------------------------------------------- 分页 -->
<el-card style="text-align:right;">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" background layout="total, sizes, prev, pager, next" :total="400"></el-pagination>
</el-card>

<!-- --------------------------------------------弹出框 -->
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
</el-dialog>
<!-- ----------------------------------------------tabs -->
<el-tabs type="border-card">
    <el-tab-pane>
        <span slot="label">
          <i class="el-icon-date"></i> 我的行程
        </span> 我的行程
    </el-tab-pane>
    <el-tab-pane label="消息中心">消息中心</el-tab-pane>
    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
</el-tabs>
<!------------------------------------------------- tree -->
<el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]"></el-tree>
</div>
</template>

<script>
    export default {
        data() {
            return {
                data: [{
                    id: 1,
                    label: "一级 2",
                    children: [{
                        id: 3,
                        label: "二级 2-1",
                        children: [{
                            id: 4,
                            label: "三级 3-1-1"
                        }, {
                            id: 5,
                            label: "三级 3-1-2",
                            disabled: true
                        }]
                    }, {
                        id: 2,
                        label: "二级 2-2",
                        disabled: true,
                        children: [{
                            id: 6,
                            label: "三级 3-2-1"
                        }, {
                            id: 7,
                            label: "三级 3-2-2",
                            disabled: true
                        }]
                    }]
                }],
                defaultProps: {
                    children: "children",
                    label: "label"
                },
                currentPage4: 4,
                dialogVisible: false,
                ruleForm: {
                    name: "",
                    region: "",
                    date1: "",
                    date2: "",
                    delivery: false,
                    type: [],
                    resource: "",
                    desc: ""
                },
                rules: {
                    name: [{
                        required: true,
                        message: "请输入活动名称",
                        trigger: "blur"
                    }, {
                        min: 3,
                        max: 5,
                        message: "长度在 3 到 5 个字符",
                        trigger: "blur"
                    }],
                    region: [{
                        required: true,
                        message: "请选择活动区域",
                        trigger: "change"
                    }],
                    date1: [{
                        type: "date",
                        required: true,
                        message: "请选择日期",
                        trigger: "change"
                    }],
                    date2: [{
                        type: "date",
                        required: true,
                        message: "请选择时间",
                        trigger: "change"
                    }],
                    type: [{
                        type: "array",
                        required: true,
                        message: "请至少选择一个活动性质",
                        trigger: "change"
                    }],
                    resource: [{
                        required: true,
                        message: "请选择活动资源",
                        trigger: "change"
                    }],
                    desc: [{
                        required: true,
                        message: "请填写活动形式",
                        trigger: "blur"
                    }]
                },
                tableData: [{
                    date: "2016-05-02",
                    name: "王小虎",
                    province: "上海",
                    city: "普陀区",
                    address: "上海市普陀区金沙江路 1518 弄",
                    zip: 200333
                }, {
                    date: "2016-05-04",
                    name: "王小虎",
                    province: "上海",
                    city: "普陀区",
                    address: "上海市普陀区金沙江路 1517 弄",
                    zip: 200333
                }, {
                    date: "2016-05-01",
                    name: "王小虎",
                    province: "上海",
                    city: "普陀区",
                    address: "上海市普陀区金沙江路 1519 弄",
                    zip: 200333
                }, {
                    date: "2016-05-03",
                    name: "王小虎",
                    province: "上海",
                    city: "普陀区",
                    address: "上海市普陀区金沙江路 1516 弄",
                    zip: 200333
                }]
            };
        },
        mounted() {
            this.init();
        },
        methods: {
            add() {
                this.dialogVisible = true;
            },
            handleClose(done) {
                this.$confirm("确认关闭？")
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            submitForm(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        alert("submit!");
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            init() {
                // let param = {}
                // this.$api.formPost("wf/leaveBill/index", param).then(res => {
                //     console.log(res);
                // });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    };
</script>
<style lang='scss' scoped>

</style>